import React, { useEffect, useContext, useState } from 'react'
import myContext from '../usecontext.js'
import * as  echarts from 'echarts'


export default function MemoryInformation(props) {
  const { info } = useContext(myContext);
  console.log(info.used_memory_peak_human);

  useEffect(() => {
    console.log(2);
    initCharts()
  }, [info.used_memory_peak_human])

  //初始化
  const initCharts = () => {
    let myChart = echarts.init(document.getElementById('Chart'));
    let option = {
      series: [
        {
          type: 'gauge',
          axisLine: {
            lineStyle: {
              width: 30,
              color: [
                [0.3, '#67e0e3'],
                [0.7, '#37a2da'],
                [1, '#fd666d']
              ]
            }
          },
          pointer: {
            itemStyle: {
              color: 'auto'
            }
          },
          axisTick: {
            distance: -30,
            length: 8,
            lineStyle: {
              color: '#fff',
              width: 2
            }
          },
          splitLine: {
            distance: -30,
            length: 30,
            lineStyle: {
              color: '#fff',
              width: 4
            }
          },
          axisLabel: {
            color: 'auto',
            distance: 40,
            fontSize: 20
          },
          detail: {
            valueAnimation: true,
            formatter: '{value} M',
            color: 'auto'
          },
          data: [
            {
              value: info.used_memory_peak_human && info.used_memory_peak_human.slice(0, info.used_memory_peak_human.length - 1)
            }
          ]
        }
      ]
    };
    // setInterval(function () {
    //   myChart.setOption({
    //     series: [
    //       {
    //         data: [
    //           {
    //             value: +(Math.random() * 100).toFixed(2)
    //           }
    //         ]
    //       }
    //     ]
    //   });
    // }, 2000);
    myChart.setOption(option);
    window.addEventListener("resize", function () {
      myChart.resize();
    });
  }

  return (
    <div>
      <div id='Chart' style={{ width: '591px', height: '420px' }}></div>
    </div>
  )
}
